交叉类型 vs. 联合类型：掌握复杂类型组合策略

            
type StringOrNumber = string | number;

let value1: StringOrNumber = "hello"; // Valid
let value2: StringOrNumber = 123; // Valid
// let value3: StringOrNumber = true; // Invalid

            

              
                Copy
              
            
          

            
interface Address {
  street: string;
  city: string;
}

interface Contact {
  email: string;
  phone: string;
}

type Person = Address & Contact;

let person: Person = {
  street: "123 Main St",
  city: "Anytown",
  email: "john.doe@example.com",
  phone: "555-1212",
};

            

              
                Copy
              
            
          

            
interface ValidatedData {
  data: any;
}

interface ValidationError {
  message: string;
}

type ValidationResult = ValidatedData | ValidationError;

function validateInput(input: any): ValidationResult {
  // Validation logic here...
  if (/* validation fails */) {
    return { message: "Invalid input" };
  } else {
    return { data: input };
  }
}

            

              
                Copy
              
            
          

            
interface HasName {
  name: string;
}

interface HasId {
  id: number;
}

interface HasAddress {
  address: string;
}

type User = HasName & HasId;

type Product = HasName & HasId & HasAddress;

            

              
                Copy
              
            
          

            
interface JsonResponse {
  type: "json";
  data: any;
}

interface XmlResponse {
  type: "xml";
  xml: string;
}

type ApiResponse = JsonResponse | XmlResponse;

function processApiResponse(response: ApiResponse) {
  if (response.type === "json") {
    console.log("Processing JSON: ", response.data);
  } else {
    console.log("Processing XML: ", response.xml);
  }
}

            

              
                Copy
              
            
          

            
interface Clickable {
  onClick: () => void;
}

interface Styleable {
  style: object;
}

type ButtonProps = {
  label: string;
} & Clickable & Styleable;

function Button(props: ButtonProps) {
  // Implementation details
  return null;
}

            

              
                Copy
              
            
          

            
interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

type Shape = Circle | Square;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius * shape.radius;
    case "square":
      return shape.sideLength * shape.sideLength;
  }
}

            

              
                Copy
              
            
          

            
type IsString = T extends string ? true : false;

let isString1: IsString = true; // true
let isString2: IsString = false; // false

            

              
                Copy
              
            
          

            
interface Person {
  name: string;
  age: number;
  email: string;
}

type ReadonlyPerson = { readonly [K in keyof Person]: Person[K] };

            

              
                Copy
              
            
          

            
interface TextField {
  type: "text";
  value: string;
  minLength?: number;
  maxLength?: number;
}

interface NumberField {
  type: "number";
  value: number;
  minValue?: number;
  maxValue?: number;
}

interface DateField {
  type: "date";
  value: string; // Consider using a Date object for better date handling
  minDate?: string; // or Date
  maxDate?: string; // or Date
}

type FormField = TextField | NumberField | DateField;

function validateField(field: FormField): boolean {
  switch (field.type) {
    case "text":
      if (field.minLength !== undefined && field.value.length < field.minLength) {
        return false;
      }
      if (field.maxLength !== undefined && field.value.length > field.maxLength) {
        return false;
      }
      break;
    case "number":
      if (field.minValue !== undefined && field.value < field.minValue) {
        return false;
      }
      if (field.maxValue !== undefined && field.value > field.maxValue) {
        return false;
      }
      break;
    case "date":
      // Date validation logic
      break;
  }
  return true;
}

function processForm(fields: FormField[]) {
  fields.forEach(field => {
    if (!validateField(field)) {
      console.log(`Validation failed for field: ${field.type}`);
    } else {
      console.log(`Validation succeeded for field: ${field.type}`);
    }
  });
}

const formFields: FormField[] = [
  {
    type: "text",
    value: "hello",
    minLength: 3,
  },
  {
    type: "number",
    value: 10,
    minValue: 5,
  },
  {
    type: "date",
    value: "2024-01-01",
  },
];

processForm(formFields);

            

              
                Copy
              
            
          

            
interface SuccessResponse {
  status: "success";
  data: any; // data can be anything depending on the request
}

interface ErrorResponse {
  status: "error";
  code: number;
  message: string;
}

interface JsonResponse extends SuccessResponse {
  contentType: "application/json";
}

interface XmlResponse {
  status: "success";
  contentType: "application/xml";
  xml: string; // XML data as a string
}

type ApiResponse = JsonResponse | XmlResponse | ErrorResponse;

async function fetchData(): Promise {
  try {
    // Simulate fetching data
    const data = { message: "Data fetched successfully" };
    return {
      status: "success",
      contentType: "application/json",
      data: data, // Assuming response is JSON
    } as JsonResponse;
  } catch (error: any) {
    return {
      status: "error",
      code: 500,
      message: error.message,
    } as ErrorResponse;
  }
}

async function processApiResponse() {
  const response = await fetchData();
  if (response.status === "success") {
    if (response.contentType === "application/json") {
      console.log("Processing JSON data: ", response.data);
    } else if (response.contentType === "application/xml") {
      console.log("Processing XML data: ", response.xml);
    }
  } else {
    console.error("Error: ", response.message);
  }
}

processApiResponse();

            

              
                Copy
              
            
          

            
interface ButtonProps {
  label: string;
  onClick: () => void;
  style?: Partial; // allows for styling through an object
  disabled?: boolean;
  className?: string;
}

function Button(props: ButtonProps): JSX.Element {
  return (
    
      {props.label}
    
  );
}

const myButtonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    cursor: 'pointer'
  }

const handleButtonClick = () => {
  alert('Button Clicked!');
}

const App = () => {
  return (
    

      
    
  );
}

            

              
                Copy